<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="myChart" class="chart1" style="width:100%; height:100%;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/china.js"></script>
<script>
    var chart1 = null;
    $(function () {
        chart1 = echarts.init($(".chart1").get(0));
    });
    setTimeout(function () {
        option = {
            title: {
                text: '',
                textStyle: {
                    color: '#057bff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            title: {
                text:'游客性别\n分析',
                left:'center',
                top:'45%',
                // padding:[24,0],
                textStyle:{
                    color:'#031f2d',
                    fontSize:20*scale,
                    align:'center'
                }
            },
            graphic: {
                type: 'text',
                top: 'center',
                // left: 'center',
                z: 2,
                zlevel: 100,
                style: {
                    text: '游客性别\n分析',
                    x: 105,
                    y: 100,
                    textAlign: 'center',
                    width: 30,
                    height: 30
                },
                fontSize: 20,
            },
            legend: {
                orient: 'vertical',
                x: '70%',
                y: '50%',
                data: ['未知性别', '男性', '女性']
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['33%', '50%'],
                    labelLine: {
                        normal: {
                            length: 10//指示线长度
                        }
                    },
                    data: [
                        {value: 335, name: '未知性别', itemStyle: {color: '#fc7600'}},
                        {value: 258, name: '男性', itemStyle: {color: '#487efe'}},
                        {value: 200, name: '女性', itemStyle: {color: '#4ad970'}},

                    ]
                }
            ]
        };
        chart1.setOption(option);
    })
</script>
</html>
